<!-- 库存概况 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="list-view">
				<u-scroll-list :indicator="false" class="p-b-0">
					<view class="top-view p-t-20">
						<view class="flex flex-sa f-35 m-b-10">
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总匹数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.currentPiecesCount||0}} </view>
							</view>
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总米数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.waitQuantityOut||0}} </view>
							</view>
							<view class="f-35">
							  <view class="flex flex-c f-32 text-color"> 总公斤 </view>
							  <view class="flex flex-c f-30 m-b-10"> {{totalObj.waitQuantityOut||0}} </view>
							</view>
						</view>
					</view>
				</u-scroll-list>
				<u-sticky offset-top="0">
					<view class="flex flex-sa nav-view">
						<view class="flex flex-c f-28" style="width: 50%;">
							<template v-if="params.data.storeName">
								<text class="m-r-10" style="color: #60b4f6;" @click="toWarehouse">{{params.data.storeName}}</text>
								<u-icon name="close" color="#60b4f6" size="10" @click="onDel"></u-icon>
							</template>
							<template v-else>
								<text class="m-r-10" @click="toWarehouse">全部库存</text>
								<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
							</template>
						</view>
						<view class="flex flex-c f-28" style="width: 50%;">
							<!-- <input class="inp-view" type="text" placeholder="产品" placeholder-style="color: #999;"> -->
							<u--input class="inp-view"
							    placeholder="产品"
							    border="surround"
							    clearable
								@confirm="onInput"
								@clear="onClear"
							  ></u--input>
						</view>
					</view>
				</u-sticky>
				
				<!-- 表格 -->
				<view style="height: 100%;">
					  <mosoweTable class="table-view" :column="column" :localData="requestMethod" dataListKey="content" dataTotalKey="totalCount"
						  @onSortChange="onSortChange"
						  @onGetTdItemChange="toNextPage"
						  :pagination = 'false'
					  >
					  <!-- slot="nameDefault"  插槽是根据column 下每个对象下的value值 + 固定值(Default) 进行覆盖渲染-->
					  <template slot="nameDefault" slot-scope="colnum">
					  	<view class="a-i-c flex" style="align-items: center; width: 240rpx; color: #999;">
							<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="30px" height="30px"></u--image>
					  		<text class="p-l-20 p-r-20" >{{colnum.rowData.code}}</text> <text class="f-24">{{ colnum.rowData.name }}</text>
					  	</view>
					  </template>
					  <template slot="canDeliverUsePiecesCountDefault" slot-scope="colnum">
					  	<view class="a-i-c">
					  		<text>{{ colnum.rowData.canDeliverUsePiecesCount }}</text> <br/><text class="f-24" style="color:#999;">米</text>
					  	</view>
					  </template>
					  </mosoweTable>
				</view>
		</view>
		<!-- 筛选弹框 -->
		<u-popup :show="show" class="sidebar" mode="right" overlayOpacity="0.3" @close="close" @open="open">
		    <view class="pop-view">
				
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {listPage, listPageFooting} from '@/apis/inventory/inventory.js'
	import mosoweTable from '@/components/mosowe-table/mosowe-table.vue'
	export default {
		name: '',
		components: {
			mosoweTable,
		},
		data() {
			return {
				config: {
				  title: "布匹-库存数",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				column: [{
						text: '名',
						value: 'index',
						width: 40
					},{
						text: '产品',
						value: 'name',
						sortable: true,
						align: 'center'
					},
					{
						text: '匹数',
						value: 'canDeliverUsePiecesCount',
						sortable: true,
						align: 'center'
					},
					{
						text: '数量',
						value: 'canDeliverUseQuantity',
						sortable: true,
						align: 'center'
					}
				],
				rowOperation: [{
						text: '编辑',
						type: 'text',
						isShow: true,
						config: {
							color: '#409eff'
						},
						click: (row) => {
							console.log('编辑', row);
						}
					},
					{
						text: '删除',
						type: 'text',
						isShow: true,
						config: {
							sizi: 'mini',
							type: 'primary',
							style: {
								height: '20px',
								lineHeight: '20px',
								fontSize: '12px'
							}
						},
						click: (row) => {
							console.log('删除', row);
						}
					}
				],
				requestMethod:[],
				params: {
					data: {
						// storeId: '', //仓库id
						// storeName: ''
					},
					page: {
						current: 1,
						size: 999
					}
				},
				totalObj: {}
			}
		},
		onLoad(opt) {
			let {storeId, storeName} = opt;
			this.params.data.storeId = storeId || null
			this.params.data.storeName = storeName || null
			listPageFooting(this.params).then(res=>{
				if(!res.flag) return;
				this.totalObj = res.data;
			})
			
			// 库存
			uni.$on('on-warehouse-data',(res)=>{
				let {name, id} = res;
				this.params.data.storeName = name;
				this.params.data.storeId = id;
				this.params.page.current = 1;
				this.getListPage()
			})
		},
		onUnLoad() {
			uni.$off('on-warehouse-data')
		},
		onShow() {
			// 监听返回页面传输参数
			uni.$on('data',(res)=>{
				console.error(res)
				this.params.data.storeName = res.name;
				this.params.data.storeId = res.id;
				this.params.page.current = 1;
				this.getListPage()
				uni.$off('data')
			})
		},
		
		methods: {
			onDel() {
				this.params.data = {};
				this.getListPage()
			},
			onClear() {
				this.params.data.name = '';
				this.params.page.current = 1;
				this.getListPage()
			},
			onInput(val) {
				this.params.data.name = val;
				this.params.page.current = 1;
				this.getListPage()
			},
			// 搜索
			onSearch() {
				// this.params.data = this.sideObj;
				this.close()
			},
			// 重置
			onReset() {
				// this.sideObj = {
				// 	storeName: '',
				// 	name: '',
				// 	colorNumber: '',
				// 	sn: '',
				// 	vatNo: ''
				// }
			},
			clickBtn(item) {
			  console.log("index", item);
				if (item.key === "btn1") {
					this.show = true
				}
			},
			close() {
			  this.show = false
			  this.getListPage()
			},
			// 跳转下一页
			toNextPage(val) {
				// let {storeId, storeName, name, spuId, code} = this.requestMethod[val.index]
				let data = encodeURIComponent(JSON.stringify(this.requestMethod[val.index]))
				uni.navigateTo({
					// url:`/pages/application/pages/cloth/matching-inventory/inventory-quantity/list?storeId=${storeId}&storeName=${storeName}&spuId=${spuId}&name=${code} ${name}`
					url:`/pages/application/pages/cloth/inventory/matching/quantity/list?data=${data}`
				})
			},
			// 去选择仓库
			toWarehouse() {
				this.$Router.push({
				  path: "/pages/application/pages/information/warehouse/warehouse",
				  query: {
				    type: 'list'
				  }
				});
			},
			getListPage() {
				uni.showLoading({
					title: '加载中'
				})
				listPage(this.params).then(res=>{
					uni.hideLoading()
					if(!res.flag) return;
					this.requestMethod = res.data.records;
					this.requestMethod.map((item,index)=>{
						item.index = index+1
						return item
					})
				})
			},
			onSortChange(event,obj) {
				console.error(event,obj)
			}
		},
		mounted() {
			this.getListPage()
		}
	}
</script>

<style lang="scss" scoped>
	.list-view {
		position: relative;
		z-index: 0;
	}
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.nav-view {
		background-color: #fff;
		height: 80rpx;
		color: #999;
		.inp-view {
			
			text-align: center;
			color: #333;
			border-radius: 0;
			border: none;
		}
	}
	.list-item {
		margin: 0 40rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 4rpx 6rpx 16rpx #c7c7c7;
		align-items: center;
		.img-view {
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 100%;
			background-color: #03A9F4;
			align-items: center;
			justify-content: center;
			color: #fafafa;
			margin-right: 24rpx;
		}
		.con-view {
			flex: 1;
			.title-view {
				color: #333;
				font-weight: bold;
			}
			.l-view {
				flex: 1;
			}
			.bot-view {
				flex-wrap: wrap;
			}
			.item-view {
				width: 50%;
				margin-bottom: 10rpx;
			}
			.gray { color: #999;}
			
		}
	}
	.pop-view {
		width: 500rpx;
		padding-top: 88rpx;
		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}
		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
</style>